<template lang="html">
  <div>
    <div>
    <div>
    <div class="box">
    <input v-model="username" class="input user" placeholder="用户名" id="">
</div>
    <div class="box">
    <input v-model="password" class="input password" placeholder="密码" id="">
    </div>
        <div class="box">
    <input v-model="rePassword" class="input password-2"  placeholder="密码" id="">
    </div>
        <div class="box">
    <input v-model="userMail" class="input mail" placeholder="邮箱" id="">
    </div>
        <div class="box">
    <input v-model="userPhone" class="input phone" placeholder="手机" id="">
    </div>

    <div @click="userLogin() " class="left">返回</div>
    <div @click="userRegister()" class="right">注册</div>


</div>
</div>


</div>

</template>
<script>
  export default {
    data(){
      return{
        username:'',
        password:'',
        userMail:'',
        userPhone:'',
        rePassword:'',
      }
    },
    methods:{
//      注册方法 

      userRegister:function (event) {
        if(this.password!=this.rePassword){
          // alert("两次密码不一致")
          this.$message({
              message: "两次密码不一致",
              type: 'error'
            });
        }else{
          let sendDate={
            username: this.username,
            password:this.password,
            userMail:this.userMail,
            userPhone:this.userPhone,
          }
          
          this.$http.post('http://localhost:5000/users/register',sendDate).then((data) => {
            if(data.body.status==1){
              this.$message({
              message: data.body.message,
              type: 'error'
            });
            }else{
              this.$message({
              message: data.body.message,
              type: 'success'
            });
              this.$router.go(-1)
            }
          })
        }

      },
      userLogin: function (event) {
        this.$router.push({
          path: 'login'
        })
      },
  }

  }
</script>
<style scoped>
  .box{
    position: relative;
    left: 500px;
    top: 0px;
    height: 33px;
    width: 350px;
    border-radius: 25px;
    margin: 25px 0px;
    background:rgb(0, 0, 0,0.3) ;
  }

  .input{
    position: absolute;
    top: 15%;
    left: 1%;
    width: 80%;
    height: 64%;
    background: transparent;
        border-radius: 25px;
        color: rgb(255, 255, 255,0.7);
    padding: 0 7%;
    border: none;
    font-size: 14px;
    outline: none;
      }
 .left{
  position: absolute;
    left: 500px;
    top: 365px;
    background: rgb(0, 0, 0, 0.3);
    width: 55px;
    height: 15px;
    border-radius: 25px;
    padding: 10px 15px 15px 15px;
    text-align: center;
    color: rgb(255, 255, 255, 0.7);
    cursor: pointer;
 }
 .right {
    position: absolute;
    left: 763px;
    top: 365px;
    background: rgb(0, 0, 0, 0.3);
    width: 55px;
    height: 15px;
    border-radius: 25px;
    padding: 10px 15px 15px 15px;
    text-align: center;
    color: rgb(255, 255, 255, 0.7);
    cursor: pointer;
  }
</style>
